<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar left-arrow @click-left="$router.go(-1)">
      <template #title>
        <van-search placeholder="请输入搜索关键词">
          <template #label
            ><span @click="$router.push(`/citylist/${bendi}`)">{{ bendi }}</span
            >▼</template
          >
        </van-search>
      </template>
      <template #right>
        <van-icon
          name="location-o"
          class="map"
          color="rgb(255, 255, 255)"
          @click="$router.push('/map')"
        />
      </template>
    </van-nav-bar>
    <!-- 下拉菜单 -->
    <van-row>
      <van-col
        span="6"
        @click="showPopup1($event)"
        :class="{ colorgg: '区域▼' === textcolor }"
        >区域▼</van-col
      >
      <van-col
        span="6"
        @click="showPopup2($event)"
        :class="{ colorgg: '方式▼' === textcolor }"
        >方式▼</van-col
      >
      <van-col
        span="6"
        @click="showPopup3($event)"
        :class="{ colorgg: '租金▼' === textcolor }"
        >租金▼</van-col
      >
      <van-col
        span="6"
        @click="showPopup4($event)"
        :class="{ colorgg: '筛选▼' === textcolor }"
        >筛选▼</van-col
      >
    </van-row>
    <!-- 上面弹出 -->
    <van-popup v-model="show1" position="top">
      <van-picker
        show-toolbar
        :columns="column1"
        value-key="label"
        @confirm="onConfirm1"
        @cancel="onCancel1"
        toolbar-position="bottom"
      />
    </van-popup>
    <van-popup v-model="show2" position="top">
      <van-picker
        show-toolbar
        :columns="column2"
        value-key="label"
        @confirm="onConfirm2"
        @cancel="onCancel2"
        toolbar-position="bottom"
      />
    </van-popup>
    <van-popup v-model="show3" position="top">
      <!--duration=0-->
      <van-picker
        show-toolbar
        :columns="column3"
        value-key="label"
        @confirm="onConfirm3"
        @cancel="onCancel3"
        toolbar-position="bottom"
      />
    </van-popup>
    <!-- 侧边弹出 -->
    <van-popup
      position="right"
      v-model="show4"
      :style="{ height: '100%', width: '80%' }"
    >
      <div class="pop">
        <p class="saixuan">户型</p>
        <Filtrate
          :msg="roomType"
          @Typeflag="roomType[$event].flag = !roomType[$event].flag"
        ></Filtrate>
        <p class="saixuan">朝向</p>
        <Filtrate
          :msg="oriented"
          @Typeflag="oriented[$event].flag = !oriented[$event].flag"
        ></Filtrate>
        <p class="saixuan">楼层</p>
        <Filtrate
          :msg="floor"
          @Typeflag="floor[$event].flag = !floor[$event].flag"
        ></Filtrate>
        <p class="saixuan">房屋亮点</p>
        <Filtrate
          :msg="characteristic"
          @Typeflag="characteristic[$event].flag = !characteristic[$event].flag"
        ></Filtrate>
        <div class="van-picker__toolbar databutton">
          <button class="van-picker__cancel" @click="onCancel4">清除</button>
          <button class="van-picker__confirm" @click="onConfirm4">确定</button>
        </div>
      </div>
    </van-popup>
    <!-- 数据页面 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <Xuanran
        v-for="(item, index) in objlist"
        :key="index + 5000000"
        :item="item"
        @click.native="$router.push(`/details/${item.houseCode}`)"
      ></Xuanran>
    </van-list>
  </div>
</template>

<script>
import { get } from '@/utils/localStorage'
import { getditie, getchazhao } from '@/api/find-house'
import { addchildren, addflag, labeldata, addvalue } from '@/api/chengshi'
import Filtrate from '@/components/filtrate.vue'
import Xuanran from '@/components/xunran.vue'
export default {
  components: {
    Filtrate,
    Xuanran
  },
  data() {
    return {
      // 弹出层
      textcolor: '',
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      bendi: JSON.parse(get()).label || '城市',
      bendivalue: JSON.parse(get()).value || '',
      column1: [],
      column2: [],
      column3: [],
      // 房屋亮点
      characteristic: [],
      // 楼层
      floor: [],
      // 朝向
      oriented: [],
      // 户型
      roomType: [],
      // 最终数据
      obj: {
        start: 1,
        end: 10
      },
      // 渲染数据
      objlist: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    // 加载
    async onLoad() {
      // 渲染页面
      const {
        data: {
          body: { list: re }
        }
      } = await getchazhao(this.obj)
      console.log(re)
      this.objlist.push(...re)
      this.loading = false
      this.obj.start += 10
      this.obj.end += 10
      if (re.length === 0) {
        this.finished = true
      }
    },
    // 弹出层
    showPopup1(i) {
      this.textcolor = i.target.innerHTML
      this.show1 = true
    },
    showPopup2(i) {
      this.textcolor = i.target.innerHTML
      this.show2 = true
    },
    showPopup3(i) {
      this.textcolor = i.target.innerHTML
      this.show3 = true
    },
    showPopup4(i) {
      this.textcolor = i.target.innerHTML
      this.show4 = true
    },
    // 确定1
    onConfirm1(e, index) {
      this.show1 = false
      console.log(e, index)
      // 处理数据
      if (e[0] === '区域') {
        this.obj.area = addvalue(this.column1, index)
      } else {
        this.obj.subway = addvalue(this.column1, index)
      }
      // 从新加载
      this.objlist = []
      this.obj.start = 1
      this.obj.end = 10
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    // 取消1
    onCancel1() {
      this.show1 = false
    },
    // 确定2
    onConfirm2(e) {
      console.log(e)
      this.show2 = false
      this.obj.rentType = e.value
      console.log(this)
      // 从新加载
      this.objlist = []
      this.obj.start = 1
      this.obj.end = 10
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    // 取消2
    onCancel2() {
      this.show2 = false
    },
    // 确定3
    onConfirm3(e) {
      console.log(e)
      this.show3 = false
      this.obj.price = e.value
      // 从新加载
      this.objlist = []
      this.obj.start = 1
      this.obj.end = 10
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    // 取消3
    onCancel3() {
      this.show3 = false
    },
    // 确定4
    onConfirm4() {
      this.show4 = false
      this.obj.roomType = labeldata(this.roomType)
      this.obj.oriented = labeldata(this.oriented)
      this.obj.floor = labeldata(this.floor)
      this.obj.characteristic = labeldata(this.characteristic)
      // 从新加载
      this.objlist = []
      this.obj.start = 1
      this.obj.end = 10
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    // 取消4
    onCancel4() {
      this.show4 = false
    }
  },
  async created() {
    if (!this.bendivalue) return
    // 最终数据
    this.obj.cityId = this.bendivalue
    // 选项数据
    const {
      data: { body: res }
    } = await getditie({ id: this.bendivalue })
    console.log(res)
    // 区域
    this.column1.push(addchildren(res.area))
    this.column1.push(addchildren(res.subway))
    // 方式
    this.column2 = res.rentType
    // 租金
    this.column3 = res.price
    // 筛选
    this.characteristic = addflag(res.characteristic, false)
    this.floor = addflag(res.floor, false)
    this.oriented = addflag(res.oriented, false)
    this.roomType = addflag(res.roomType, false)
  }
}
</script>

<style scoped lang="less">
// 头部
::v-deep .van-nav-bar__content {
  background: rgb(15, 172, 62);
  .van-search {
    background: rgb(15, 172, 62);
    padding: 0px !important;
  }
}
.map {
  font-size: 30px !important;
  width: 25px !important;
}
::v-deep .van-nav-bar__title {
  max-width: 100% !important;
}
::v-deep .van-icon {
  color: rgb(255, 255, 255) !important;
  font-size: 30px !important;
}
::v-deep .van-icon-search {
  color: rgb(169, 163, 163) !important;
}
::v-deep .van-icon-search {
  font-size: 20px !important;
}
// 下拉菜单
.saixuan {
  margin: 20px 0px 0px 20px;
}
.van-popup--top {
  top: 90px;
}
.van-row {
  height: 50px;
  line-height: 50px;
  box-shadow: 1px 1px 10px rgb(225, 221, 221);
  .van-col--6 {
    text-align: center;
  }
  .colorgg {
    color: rgb(15, 172, 62);
  }
}
.pop {
  padding-bottom: 50px;
  position: relative;
}
.databutton {
  position: absolute;
  bottom: 0px;
  width: 100%;
}
::v-deep .van-picker__cancel {
  flex: 4;
  background: rgb(255, 255, 255);
  color: rgb(15, 172, 62);
  font-size: 20px;
}
::v-deep .van-picker__confirm {
  flex: 6;
  background: rgb(15, 172, 62);
  color: rgb(255, 255, 255);
  font-size: 20px;
}
</style>
